@use '@/assets/css/utils.scss' as *;
.app-container {
  height: 100%;
}

.app-head {
  position: relative;
  z-index: 1;
  height: vw(65);
  box-sizing: border-box;
  padding: 0 vw(30);

  .app-head-title {
    font-size: vw(35);
    font-weight: bold;
    letter-spacing: vw(6);
    line-height: vw(48);
    color: transparent;
    background: linear-gradient(to bottom, #fff 60%, transparent);
    background-clip: text;
    filter: drop-shadow(0 vw(6) vw(1) #000050);
  }
  .app-head-center {
    width: vw(1084);
    height: 100%;
    background: url('@/assets/images/head.png');
    background-size: 100% 100%;
    margin: 0 auto;
    filter: drop-shadow(0 vw(-4) vw(20) #25d8fd);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .app-head-left,
  .app-head-right {
    position: absolute;
    top: vw(12);
    width: vw(404);
    height: vw(30);
    box-sizing: border-box;
  }
  .app-head-left {
    left: vw(30);
    background: url('@/assets/images/head-left.png');
    background-size: 100% 100%;
  }
  .app-head-right {
    right: vw(30);
    background: url('@/assets/images/head-right.png');
    background-size: 100% 100%;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: vw(48);

    font-size: vw(16);
    font-weight: normal;
    color: #23cefd;
  }
}
.app-main {
  height: calc(100% - vw(65 + 8));
  overflow: auto;
  box-sizing: border-box;
  padding: 0 vw(30) vw(30) vw(30);
  margin: vw(8) 0 0 0;
}
